<template>
  <!-- 社区文章详情 -->
  <div class="Detail">
    <div v-if="!$isMobile">
      <div class="g-con">
        <div class="g-ad" style="height: 140px">
          <a :href="getAd('8', 'href')" target="_blank">
            <img :src="getAd('8', 'image')" alt="" />
          </a>
        </div>
        <div class="breadcrumb flexsc">
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">{{ t('home') }}</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/blog' }">
              {{ t('header.menu4') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ zoningName }}</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="share">
            <img src="@/assets/img/icon_link.png" alt="" @click="shareFn('link')" />
            <img src="@/assets/img/icon_facebook.png" alt="" @click="shareFn('QRCode')" />
            <img src="@/assets/img/icon_tite.png" alt="" @click="shareFn('QRCode')" />
            <img src="@/assets/img/icon_xinlang.png" alt="" @click="shareFn('QRCode')" />
            <img src="@/assets/img/icon_weixin.png" alt="" @click="shareFn('QRCode')" />
          </div>
        </div>
        <div class="container">
          <div class="title flexcc">{{ detailInfo.articleTitle }}</div>
          <div class="author flexcc mt-3">{{ detailInfo.customerName }} · {{ dateFormat(detailInfo.createTime, 2) }}</div>
          <div class="info mt-3" v-if="!imgList.length">
            {{ detailInfo.articleText }}
          </div>
          <div v-if="imgList.length">
            <div class="info mt-3" v-for="(item, index) in imgList" :key="index">
              <p v-if="index != imgList.length - 1">
                {{ detailInfo.articleText.slice(index * 300, (index + 1) * 300) }}
              </p>
              <p v-else>
                {{ detailInfo.articleText.slice(index * 300) }}
              </p>
              <p class="txt-img">
                <!-- <img :src="item" alt="" /> -->
                <el-image :src="item" fit="contain" style="width: 756px;height: 384px;"></el-image>
              </p>
            </div>
          </div>
          <div class="user-info mt-2">
            <div class="avatar">
              <img :src="detailInfo.avatar" @click="openUrl('/member', {id: detailInfo.customerId})" />
            </div>
            <div class="name">
              {{ detailInfo.customerName }}
            </div>
            <div class="role-type mb-2">
              {{ detailInfo.label }}
            </div>
            <!-- <div class="narration mt-3 mb-2">
              {{ t('blog.nar') }}
            </div> -->
            <el-button v-if="detailInfo.isLike == 0" class="like" type="primary"
              :color="detailInfo.isLike > 0 ? '' : '#EAEBEC'" @click="changeLike(0, detailInfo)">
              <img src="@/assets/img/icon_dianzan_nor.png" alt="" class="mr-1" />
              {{ detailInfo.likeCount }}
            </el-button>
            <el-button v-if="detailInfo.isLike > 0" class="like" type="primary" @click="changeLike(1, detailInfo)">
              <img src="@/assets/img/icon_dianzan_nor.png" alt="" v-if="detailInfo.isLike > 0" class="mr-1" />
              {{ detailInfo.likeCount }}
            </el-button>
          </div>
          <div class="comment mt-3">
            <el-input type="textarea" v-model="commentValue" :autosize="{ minRows: 4, maxRows: 4 }" resize="none"
              placeholder="" clearable :maxlength="500" show-word-limit style="padding-top: 14px" />
            <el-button type="primary" class="mt-1" :disabled="!commentValue" @click="postCommentFn">{{ t('blog.comment')
            }}</el-button>
          </div>
          <div class="comment-container">
            <div class="comment-list mt-3" v-for="child in commentList" :key="child">
              <div class="wp-100 ip-date">{{ child.commentLocation }} {{ dateFormat(child.commentDate, 2) }}</div>
              <div :span="24" class="comment-item">
                <div class="head-sculpture">
                  <img :src="child.customerAvatar" alt="" />
                </div>
                <div class="name">
                  <h2>
                    {{ child.customerName }}<span class="date"> · {{ child.label }}</span>
                  </h2>
                  <p>{{ child.commentContent }}</p>
                </div>
              </div>
            </div>

            <div class="flexcc mt-3">
              <el-pagination layout="prev, pager, next" :hide-on-single-page="total <= page.pageSize" :total="total"
                v-model:current-page="page.pageNum" :page-size="page.pageSize" @current-change="handleCurrentChange">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <el-dialog v-model="QrCodeVis" :title="t('blog.dlt2')" width="30%" destroy-on-close center>
        <el-image :src="currentLinkImg" class="qrcode"></el-image>
      </el-dialog>
    </div>
    <div v-if="$isMobile">
      <mBlogDetail />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { dateFormat, openUrl } from '@/utils/index'
import { getInfo, articleCancelLike, articleLike, getCommentList, postComment, generateQrCode, getZoningList } from '@/service/blog.js'
import axios from 'axios'
import mBlogDetail from './mBlogDetail.vue'
import useAd from '@/stores/ad'
import useClipboard from 'vue-clipboard3'

const { $isMobile } = getCurrentInstance().appContext.config.globalProperties
const router = useRouter()
const route = useRoute()
const { t, locale } = useI18n()

onMounted(() => {
  init()
})
watch(locale, (n) => {
  init()
})

const { toClipboard } = useClipboard()
const copy = async (text) => {
  try {
    await toClipboard(text)
    ElMessage.success(t('news.copy'))
  } catch (e) { }
}

const storeAd = useAd()
const { getAd } = storeAd

const commentValue = ref('')
const postCommentFn = async () => {
  let data = {
    articleId: route.query.id,
    commentContent: commentValue.value,
    // commentDate:new Date().getTime(),
    customerId: JSON.parse(localStorage.getItem('login'))?.userInfo?.id,
    commentLocation: IPValue.value
  }
  await postComment(data).then((res) => { })
  getCurComment()
  commentValue.value = ''
}

// 评论列表
const page = ref({
  pageNum: 1,
  pageSize: 10
})
const total = ref(0)
const commentList = ref([])
const getCurComment = () => {
  getCommentList(page.value, { articleId: route.query.id }).then(({ rows, total: t }) => {
    commentList.value = rows
    total.value = t
  })
}
const handleCurrentChange = (val) => {
  getCurComment()
}

const changeLike = async (value, item) => {
  let data = {
    customerId: JSON.parse(localStorage.getItem('login')).userInfo.id,
    objType: 0,
    objId: route.query.id
  }
  if (value == 0) {
    await articleLike(data).then((res) => { })
  } else {
    await articleCancelLike(data).then((res) => { })
  }
  getInfoFn()
}

//
const detailInfo = ref({})
const imgList = ref([])
const getInfoFn = async () => {
  await getInfo({ id: route.query.id }).then((res) => {
    detailInfo.value = res.data
    imgList.value = res.data.articlePicture?.split(',') || []
  })

  getZoningListFn()
}

// 当前分区
const zoningName = ref('')
const getZoningListFn = () => {
  getZoningList().then(({ data }) => {
    zoningName.value = data.find((item) => item.id === detailInfo.value.zoningId)?.zoningName
  })
}

//分享
const QrCodeVis = ref(false)
const currentLinkImg = ref('')
const shareFn = (type) => {
  if (type == 'link') {
    copy(window.location.href)
  } else {
    generateQrCode({ link: window.location.href }).then((res) => {
      currentLinkImg.value = window.URL.createObjectURL(res)
      QrCodeVis.value = true
    })
  }
}

//
const IPValue = ref('')
const getIP = () => {
  axios.get('https://qifu-api.baidubce.com/ip/local/geo/v1/district').then((res) => {
    IPValue.value = res.data.data.country + res.data.data.city
  })
}

//
const init = () => {
  getInfoFn()
  getCurComment()
  getIP()
}
</script>

<style scoped lang="scss">
.Detail {
  .breadcrumb {
    padding: 30px 0;
    border-bottom: 2px solid #eaebec;
    display: flex;
    justify-content: space-between;

    .share {
      img {
        width: 30px;
        height: 30px;
        margin-left: 28px;
        cursor: pointer;
      }
    }
  }

  .container {
    padding: 70px 0;

    .title {
      font-size: 28px;
      font-weight: bold;
    }

    .author {
      color: #9d9fa5;
    }

    .info {
      color: #6a6973;
      line-height: 1.6;
      word-break: break-all;

      img {
        max-width: 100%;
      }
    }

    .txt-img {
      width: 60%;
      margin: 40px auto;

      img {
        width: 100%;
        height: 384px;
      }
    }

    .user-info {
      min-width: 445px;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .avatar {
        width: 40px;
        height: 40px;
        margin: auto;

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }

      .name {
        text-align: center;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #252628;
        margin: 10px 0px;
      }

      .role-type {
        text-align: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #9d9fa5;
      }

      .narration {
        text-align: center;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #6a6973;
        line-height: 26px;
      }

      .like {
        width: 130px;
        margin: auto;
      }
    }

    .comment {
      width: 100%;
      display: flex;
      flex-direction: column;

      button {
        width: 140px;
        margin-left: 89%;
      }
    }

    .comment-container {
      width: 100%;
      // max-height: 600px;
      overflow-y: auto;
      margin-top: 30px;

      .comment-list {
        width: 100%;
        background: rgba(245, 245, 245, 1);
        padding: 18px 15px 28px 31px;
        margin-top: 30px;

        &:nth-child(1) {
          margin-top: 0px;
        }

        .ip-date {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #9d9fa5;
          text-align: right;
        }

        .comment-item {
          display: flex;

          .head-sculpture {
            img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              margin-right: 12px;
            }
          }

          .name {
            padding-top: 4px;

            h2 {
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #252628;

              .date {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #9d9fa5;
              }
            }

            p {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #9d9fa5;
              margin-top: 4px;
            }
          }
        }
      }
    }
  }
}

.qrcode {
  width: 100%;
  height: 100%;

  :deep(img) {
    width: 40%;
    height: 40%;
    margin-left: 30%;
  }
}
</style>
